[#ftl] 
 [@define "agile.ClassEditor","agile.MultiValueMetadataEditor"]
 	[#assign templateString]	
    <form style="background-color:#afeeee">
	 		<legend>{i18n_class_name}</legend>
	 		<div data-dojo-type="agile.MultiSelectEditorX" data-dojo-attach-point="selector" data-dojo-props='valueDelimeter:" "'>
	 		 	<div data-dojo-type="agile.NumberComboBox" data-dojo-props="width:'120px',class:'meditor',name:'class',htmlName:'class'"></div>
	 		 	[#--<div data-dojo-type='dijit.form.CheckBox'  data-dojo-props="class:'applytoall',title:'apply to all other widgets of same type'"></div>--]
	 	 	</div>	 
 	 </form> 
 	[/#assign]
 	templateString:"${templateString?js_string}"	
 	,name:"class",htmlName:"class"
 	,propertyNames:["class"]		
	 ,init:function(){
		 this.inherited(arguments);
		 agile.onEnterKeyPress(this.meditors["class"],lang.hitch(this,function(){this.selector.addOption()}));
		 [#--TODO
//		 query(".applytoall",this.domNode).forEach(function(node){
//			 this.connect(registry.byNode(node),"onChange",function(value){
//				//console.log("@@@@",value);
//				 if(value != null){
//					 
//				 }
//			 });	 
//		 },this);	
		 --]
 	 }
//	 ,processBeforeAdd:function(){
////		 //console.log("TransformMultiValueEditor.validateBeforeAdd=",this.meditors["transform"].isValid());
// 		return this.meditors["transform"].isValid();
//	 } 	 
	,onChange:function(value,name,htmlName){	
//		console.log("ClassEditor##onChange:",value,name,htmlName);	
		if(this.context){
			var ownerWidget = this.context.getCurrentWidget();
//			console.log("ownerWidget:",ownerWidget);
			if(ownerWidget){		
				ownerWidget.metadata(this.metadataCategory+"."+htmlName,value);				
//				var nodes = ownerWidget.getStyleNodes(htmlName);
////				console.log("nodes:",nodes.length);
//				if(value != null){
//					for(var i = nodes.length-1; i >=0; i--){
//						if(!domClass.contains(nodes[i],value)){
//							domClass.add(nodes[i],value);
//						}
//					}			
//				}else{
//					for(var i = nodes.length-1; i >=0; i--){
//						if(domClass.contains(nodes[i],this.value)){
//							domClass.remove(nodes[i],this.value);
//						}
//					}
//				}
			}
		}		
	}
	   ,addOption:function(options,index){
		  // console.log("addOption",options);
			if(this.context){
				var ownerWidget = this.context.getCurrentWidget();
				if(ownerWidget){
					var nodes = ownerWidget.getStyleNodes(this.htmlName);
						for(var i = nodes.length-1; i >=0; i--){
							if(!domClass.contains(nodes[i],options[0].value)){
								domClass.add(nodes[i],options[0].value);
							}
						}	
				}
			}		
	   }
	   ,removeOption:function(option){
		  // console.log("removeOption",option);
			if(this.context){
				var ownerWidget = this.context.getCurrentWidget();
				if(ownerWidget){
					var nodes = ownerWidget.getStyleNodes(this.htmlName);
						for(var i = nodes.length-1; i >=0; i--){
							if(domClass.contains(nodes[i],option.value)){
								domClass.remove(nodes[i],option.value);
							}
						}	
				}
			}
	   }
 [/@]